/* model */
import { ConnectorModuleComponentNameEnum } from '@src/modules/connector/model'
/* scss */
import '@src/modules/connector/view/setting/components/header/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
import { t } from '@src/locales'

export type ConnectorSettingViewHeaderProps = {
  loading: boolean;
  moduleName: string;
  name:string
}

export interface ConnectorSettingViewHeaderSetupState {
  
}

export enum ConnectorSettingViewHeaderEmitEventNameEnum {
  Input = 'input',
  Save = 'save',
  Back = 'back'
}

export type ConnectorSettingViewHeaderInstance = ComponentInstance & ConnectorSettingViewHeaderSetupState
export type ConnectorSettingViewHeaderVM = ComponentRenderProxy<ConnectorSettingViewHeaderProps> & CommonComponentInstance & ConnectorSettingViewHeaderInstance

export default defineComponent({
  name: ConnectorModuleComponentNameEnum.ConnectorSettingViewHeader,
  emits: [
    ConnectorSettingViewHeaderEmitEventNameEnum.Input,
    ConnectorSettingViewHeaderEmitEventNameEnum.Save,
    ConnectorSettingViewHeaderEmitEventNameEnum.Back,
  ],
  props: {
    /* 加载状态 */
    loading: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    /* 模块名称 */
    moduleName: {
      type: String as PropType<string>,
      default: ''
    },
    /* 连接器名称 */
    name: {
      type: String as PropType<string>,
      default: ''
    }
  },
  setup(props: ConnectorSettingViewHeaderProps, { emit }) {
    
    const tooltip = computed(() => {
      return t('common.connector.editSth', {name: props.moduleName})
    })
    
    const placeholder = computed(() => {
      return t('common.connector.inputSth', {name: props.moduleName})
    })

    const onInputName = (name:string)=> {
      emit(ConnectorSettingViewHeaderEmitEventNameEnum.Input,name)
    }
    const save = ()=> {
      emit(ConnectorSettingViewHeaderEmitEventNameEnum.Save)
    }
    
    const back = ()=> {
      emit(ConnectorSettingViewHeaderEmitEventNameEnum.Back)
    }
    
    return {
      tooltip,
      placeholder,
      save,
      onInputName,
      back
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={ConnectorModuleComponentNameEnum.ConnectorSettingViewHeader}>
      
        <div class="connector-setting-view-header-left-wrap">
          
          <div class="connector-setting-view-header-back-btn" onClick={this.back}>
            <i class="iconfont icon-arrow-left">
            </i>
            {t('common.base.back')}
          </div>
          
          <div class="connector-setting-view-header-base-info">
            <el-tooltip
              effect="dark"
              content={this.tooltip}
              placement="bottom"
            >
              <el-input
                class="connector-setting-view-header-name"
                placeholder={this.placeholder}
                maxLength='20'
                value={this.name}
                onInput={this.onInputName}
              >
              </el-input>
            </el-tooltip>
          </div>
          
        </div>
        
        <div class="connector-setting-view-header-right-wrap">
          <el-button
            class="connector-setting-view-header-save-btn"
            plain
            loading={this.loading}
            onClick={this.save}
          >
            {t('common.base.save')}
          </el-button>
        </div>
        
      </div>
    )
  }
})
